<template>
  <div>
    <div class="demo-inner-divider">基本</div>
    <div class="switch">
      <div>
        <p>可用</p>
        <e-switch v-model="falseValue"></e-switch>
      </div>
      <div>
        <p>开启-禁用</p>
        <e-switch
          v-model="ok"
          disabled
        ></e-switch>
      </div>
      <div>
        <p>关闭-禁用</p>
        <e-switch
          v-model="cancel"
          disabled
        ></e-switch>
      </div>
    </div>
    <div class="demo-inner-divider">尺寸</div>
    <div class="switch">
      <div>
        <p>大</p>
        <e-switch
          v-model="falseValue"
          :size="'large'"
        ></e-switch>
      </div>
      <!-- <div>
        <p>中（默认）</p>
        <e-switch v-model="falseValue"></e-switch>
      </div> -->
      <div>
        <p>小（默认）</p>
        <e-switch
          v-model="falseValue"
          :size="'small'"
        ></e-switch>
      </div>
    </div>
    <div class="demo-inner-divider">文字和图标</div>
    <div class="switch">
      <div>
        <p>文字</p>
        <e-switch v-model="falseValue" :size="'large'">
          <template #open>
            <span>开</span>
          </template>
          <template #close>
            <span>关</span>
          </template>
        </e-switch>
      </div>
      <div>
        <p>文字</p>
        <e-switch v-model="falseValue">
          <template #open>
            <span>1</span>
          </template>
          <template #close>
            <span>0</span>
          </template>
        </e-switch>
      </div>
      <div>
        <p>图标版</p>
        <e-switch v-model="falseValue">
          <template #open>
            <e-icon type="check"> </e-icon>
          </template>
          <template #close>
            <e-icon type="close"> </e-icon>
          </template>
        </e-switch>
      </div>
    </div>
    <div class="demo-inner-divider">加载状态</div>
    <div class="switch">
      <div>
        <p>开启-加载</p>
        <e-switch
          v-model="ok"
          :loading="loading"
        >
        </e-switch>
        <e-switch
          v-model="cancel"
          :loading="loading"
        >
        </e-switch>
      </div>
      <div>
        <p>关闭-加载</p>
        <e-switch
          :size="'small'"
          v-model="ok"
          :loading="loading"
        >
        </e-switch>
        <e-switch
          :size="'small'"
          v-model="cancel"
          :loading="loading"
        >
        </e-switch>
      </div>
    </div>
    <div class="demo-inner-divider">自定义颜色</div>
    <div class="switch">
      <div>
        <p>自定义颜色</p>
        <e-switch
          v-model="falseValue"
          :true-color="'green'"
          :false-color="'#FF0000'"
        ></e-switch>
      </div>
    </div>
    <div class="demo-inner-divider">切换前置事件</div>
    <div class="switch">
      <div>
        <p>设置属性before-change为一个方法，并返回Promise，可以暂停切换，直到promise返回resolve。</p>
        <e-switch
          v-model="trueValue"
          :before-change="handleBeforeChange"
          @on-change="onChange"
        ></e-switch>
      </div>
    </div>
    <switch-md class="markdown-body"></switch-md>
  </div>
</template>

<script>
import switchMd from '../../docs/switch.md';

export default {
  name: 'DemoSwitch',
  components: {
    switchMd
  },
  data() {
    return {
      trueValue: true,
      falseValue: false,
      loading: true,
      ok:true,
      cancel:false
    };
  },
  methods: {
    handleBeforeChange () {
      return new Promise((resolve) => {
        let result = confirm("按下确定按钮继续切换");
        if (result){
          resolve();
        }
      });
    },
    onChange(val){
      console.log('switch value',val)
    }
  },
}
</script>

<style scoped>
.switch{
  display: flex;
  flex-direction: row;
  margin-bottom: 60px;
}
.switch > div{
  margin-right: 50px ;
}
.switch p {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color:rgba(98,54,255,1);
  margin-bottom: 10px;
}
</style>
